import React, {useState, useEffect, FC} from 'react'
import {Editor, Toolbar} from '@wangeditor/editor-for-react'
import {IDomEditor, IEditorConfig} from '@wangeditor/editor'
import '@wangeditor/editor/dist/css/style.css' ;
import {Button, Input, message} from "antd";
import api from "../../../api";
import {useNavigate} from "react-router-dom";
import BreadcrumbPath from "../../../components/BreadcrumbPath"; // 引入 css


const AddAnnouncement: FC = () => {
    const [editor, setEditor] = useState<IDomEditor | null>(null) // 存储 editor 实例
    const [html, setHtml] = useState<any>('') // 编辑器内容
    const [title, setTitle] = useState<string>('') // 标题

    const navigate = useNavigate();
    // 修改编辑器配置
    const toolbarConfig = {
        excludeKeys: [
            'uploadVideo',
            'uploadImage' // 排除菜单组，写菜单组 key 的值即可
        ]
    }
    const editorConfig: Partial<IEditorConfig> = {
        placeholder: '请输入内容...',
    }

    // 及时销毁 editor ，重要！
    useEffect(() => {
        return () => {
            if (editor == null) return
            editor.destroy()
            setEditor(null)
        }
    }, [editor])
    return (
        <div>
            <div style={{display: "flex", justifyContent: "space-between"}}>
                {/*<h1>添加公告</h1>*/}
                <BreadcrumbPath/>
                <div>
                    <Button type="primary" onClick={() => {
                        if (html == "" || html == "<p><br></p>" || title == "") {
                            message.error("标题和文章内容都不能为空！")
                            return
                        }
                        // 添加公告
                        api.addAnnouncements({
                            title,
                            content: html //.replace(/<\/?.+?>/g, "")  去除html标签
                        }).then(res => {
                            message.success(res.msg)
                            navigate("/main/announcement/announcementList")
                        }).catch(err => {
                            message.error(err)
                        })
                    }}>发布</Button>
                    <Input style={{width: "300px", marginLeft: "10px"}} placeholder="输入公告的标题" value={title}
                           onChange={(event) => {
                               setTitle(event.target.value)
                           }}/>
                </div>
            </div>


            {/* 富文本框 */}
            <div style={{border: '1px solid #ccc', zIndex: 100}}>
                <Toolbar
                    editor={editor}
                    defaultConfig={toolbarConfig}
                    mode="default"
                    style={{borderBottom: '1px solid #ccc'}}
                />
                <Editor
                    defaultConfig={editorConfig}
                    value={html}
                    onCreated={setEditor}
                    onChange={editor => setHtml(editor.getHtml())}
                    mode="default"
                    style={{height: '430px', overflowY: 'hidden'}}
                />
            </div>
        </div>
    )
}
export default AddAnnouncement;